import axios from 'axios'
import { Loading, Message } from 'element-ui';  //单独加载加载动画和消息提醒的ui组件/服务
import router from "./router";

//在这里设置请求时弹出加载动画和成功失败提示消息：
let loading;
function startLoading() {
  loading = Loading.service({
    lock: true,
    text: '拼命加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
}
function endLoading() {
  loading.close();
}
/**
 * axios提供了请求拦截和响应拦截接口
 * 我这里需要用到就在这个文件中配置一下
 * */
let count = 0;
/** 为防止多个请求同时进行时，个别请求先成功得到了数据，从而导致其他请求没好时就关闭了loading
 * 所以加个计数器，当所有请求都完成时再关闭loading
 * */
// 请求拦截
axios.interceptors.request.use(config => {
  count++;
  //加载动画
  startLoading();

  if(localStorage.wuhenToken){
    //设置统一的请求头header
    config.headers.Authorization = localStorage.wuhenToken;
  }
  return config;
}, error => {
  count--;
  endLoading();
  return Promise.reject(error);
});
//响应拦截
axios.interceptors.response.use(response => {
  count--;
  if(count <= 0){
    endLoading();
  }
  return response;
},error => {
  //错误提醒
  Message.error(error.response.data);

  const {status} = error.response;
  if(status == 401){
    Message.error('token已失效，请重新登陆');
    localStorage.removeItem('wuhenToken');
    localStorage.removeItem('avatar');
    router.push('/login');
    count = 0;
    endLoading();
  }
  count--;
  if(count <= 0){
    endLoading();
  }

  return Promise.reject(error);
});

export default axios;